<template>
	<div class="page-container">
		<div class="content">
			<div class="top-tab">
				<a v-for="(tab,index) in topicTabs" :class="index === selected ? 'active' : ''" @click.prevent.stop="topicTabsUpdate(index,tab.ename)">
					{{tab.name}}
				</a>
			</div>
			<c-loading v-if="hint.show"></c-loading>
			<c-list :items='topicList'></c-list>
		</div>
	</div>
</template>

<script>
	// import cFooter from 'components/Footer';
	import cLoading from 'components/loading';
	import cList from 'components/List';
	import { mapGetters,mapActions} from 'vuex';
    export default {
      data() {
          return {
          	selected: 0
          };
      },

      components: {
      	cLoading,
      	cList
      },

      beforeMount(){
      	this.initHint();
      	this.showHint();
      	const topicListObject = {
      		topicTab: 'all',
      		currentPage : 1
      	};
      	// 获取文章列表
      	this.fetchTopicList(topicListObject)
      		.catch((e) => console.log(e))
      },

      computed: {
      	...mapGetters({
      		hint: 'getHint',
      		topicTabs:'getTopicTabs',
      		topicList:'getTopicLists'
      	}),
      },

      methods:{
      	...mapActions([
	        'initHint',
	        'showHint',
	        'fetchTopicList'
	      ]),
      	topicTabsUpdate(index,ename){
      		this.initHint();
      		this.showHint();
      		this.selected = index;
      		const topicListObject = {
      			topicTab: ename,
      			currentPage: index
      		};
      		this.fetchTopicList(topicListObject)
      			.catch((e) => console.log(e));
      	}
      }
    };
</script>

<style lang='scss' scoped>
	$tabColor: #80BD01;
	.active{
		background-color: $tabColor;
		color: #fff !important;
		border-radius: 3px;
		padding: 3px;
	}
	.page-container{
		width: 90%;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 20px;
	}
	.content{
		width: 100%;
		overflow: hidden;
		.top-tab{
			width: 100%;
			height: 20px;
			line-height: 20px;
			padding: 15px 0;
			a{
				margin: 0 10px;
				color: $tabColor;
				&:hover {
			     	color: #005580;
			   }
			}
		}
	}
</style>